/* 学习目标：useState规范写法  */
/* 学习目标：hooks的三个使用限制  */
// 1. 不能在if else语句中使用
// 2. 不能在for语句中使用

import React, { useState } from 'react';

export default function App() {
  // 👍 const [变量名, set+驼峰名变量] = useState(初始值)
  const [count, setCount] = useState(0);
  const isShow = false;
  if (isShow) {
    // ❌ const [msg, setMsg] = useState('hello React');
  }

  const list = [1, 3];

  // 2. 不能在for语句中使用
  for (let i = 0; i < list.length; i++) {
    // ❌ const [msg, setMsg] = useState('hello React');
  }

  const [title, setTitle] = useState('hello React');

  return (
    <div>
      App
      <hr />
      {count}
      <hr />
      <button onClick={() => setCount(count + 1)}>++</button>
    </div>
  );
}

// 3. 不能在普通函数中使用： 非大写开头，非use+驼峰的函数
// React中的特殊函数：
// 1. 组件函数: 大写开头
// 2. use开头的函数： use+驼峰命名

// ❌
// function hello() {
//   const [count, setCount] = useState(0);
//   return <h1>hello</h1>;
// }

// ❌
// function xxxDel() {
//   const [count, setCount] = useState(0);
// }
